<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>quadrant-todo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 添加任务的浮动按钮 -->
        <button class="add-task-trigger" onclick="openAddTaskModal()" title="添加新任务">
            +
        </button>
        
        <!-- 导出任务的浮动按钮 -->
        <button class="export-task-trigger" onclick="openExportModal()" title="导出任务为Markdown">
            ↓
        </button>

        <div class="view-settings">
            <label class="focus-switch" title="启用后鼠标移入象限会放大当前象限">
                <input type="checkbox" id="quadrantFocusToggle">
                <span class="focus-switch-slider" aria-hidden="true"></span>
                <span class="focus-switch-text">象限聚焦模式</span>
            </label>
        </div>

        <div class="quadrants">
            <div class="quadrant urgent-important" data-quadrant="urgent-important">
                <div class="quadrant-header">
                    <h2>紧急且重要</h2>
                    <div class="quadrant-actions">
                        <div class="quadrant-filter-group" data-quadrant="urgent-important">
                            <button class="quadrant-filter-btn" data-quadrant="urgent-important" data-filter="pending" aria-pressed="false" title="仅查看进行中" aria-label="仅查看进行中">◦</button>
                            <button class="quadrant-filter-btn" data-quadrant="urgent-important" data-filter="completed" aria-pressed="false" title="仅查看已完成" aria-label="仅查看已完成">✔</button>
                        </div>
                        <button class="quadrant-expand-btn" data-quadrant="urgent-important" title="全屏查看此象限">⤢</button>
                        <button class="quick-add-btn" data-quadrant="urgent-important" title="快速添加任务到此象限">+</button>
                    </div>
                </div>
                <div class="drop-zone" id="urgent-important-zone"></div>
            </div>
            
            <div class="quadrant important-not-urgent" data-quadrant="important-not-urgent">
                <div class="quadrant-header">
                    <h2>重要不紧急</h2>
                    <div class="quadrant-actions">
                        <div class="quadrant-filter-group" data-quadrant="important-not-urgent">
                            <button class="quadrant-filter-btn" data-quadrant="important-not-urgent" data-filter="pending" aria-pressed="false" title="仅查看进行中" aria-label="仅查看进行中">◦</button>
                            <button class="quadrant-filter-btn" data-quadrant="important-not-urgent" data-filter="completed" aria-pressed="false" title="仅查看已完成" aria-label="仅查看已完成">✔</button>
                        </div>
                        <button class="quadrant-expand-btn" data-quadrant="important-not-urgent" title="全屏查看此象限">⤢</button>
                        <button class="quick-add-btn" data-quadrant="important-not-urgent" title="快速添加任务到此象限">+</button>
                    </div>
                </div>
                <div class="drop-zone" id="important-not-urgent-zone"></div>
            </div>
            
            <div class="quadrant not-important-urgent" data-quadrant="not-important-urgent">
                <div class="quadrant-header">
                    <h2>不重要紧急</h2>
                    <div class="quadrant-actions">
                        <div class="quadrant-filter-group" data-quadrant="not-important-urgent">
                            <button class="quadrant-filter-btn" data-quadrant="not-important-urgent" data-filter="pending" aria-pressed="false" title="仅查看进行中" aria-label="仅查看进行中">◦</button>
                            <button class="quadrant-filter-btn" data-quadrant="not-important-urgent" data-filter="completed" aria-pressed="false" title="仅查看已完成" aria-label="仅查看已完成">✔</button>
                        </div>
                        <button class="quadrant-expand-btn" data-quadrant="not-important-urgent" title="全屏查看此象限">⤢</button>
                        <button class="quick-add-btn" data-quadrant="not-important-urgent" title="快速添加任务到此象限">+</button>
                    </div>
                </div>
                <div class="drop-zone" id="not-important-urgent-zone"></div>
            </div>
            
            <div class="quadrant not-important-not-urgent" data-quadrant="not-important-not-urgent">
                <div class="quadrant-header">
                    <h2>不紧急不重要</h2>
                    <div class="quadrant-actions">
                        <div class="quadrant-filter-group" data-quadrant="not-important-not-urgent">
                            <button class="quadrant-filter-btn" data-quadrant="not-important-not-urgent" data-filter="pending" aria-pressed="false" title="仅查看进行中" aria-label="仅查看进行中">◦</button>
                            <button class="quadrant-filter-btn" data-quadrant="not-important-not-urgent" data-filter="completed" aria-pressed="false" title="仅查看已完成" aria-label="仅查看已完成">✔</button>
                        </div>
                        <button class="quadrant-expand-btn" data-quadrant="not-important-not-urgent" title="全屏查看此象限">⤢</button>
                        <button class="quick-add-btn" data-quadrant="not-important-not-urgent" title="快速添加任务到此象限">+</button>
                    </div>
                </div>
                <div class="drop-zone" id="not-important-not-urgent-zone"></div>
            </div>
        </div>
    </div>

    <!-- 添加任务弹窗 -->
    <div class="modal-overlay" id="addTaskModal">
        <div class="modal">
            <div class="modal-header">
                <h2 class="modal-title">添加新任务</h2>
                <button class="modal-close" onclick="closeAddTaskModal()">×</button>
            </div>
            <form class="modal-form" onsubmit="return false;">
                <div class="form-group">
                    <label for="modalTaskTitle">任务标题</label>
                    <input type="text" id="modalTaskTitle" placeholder="请输入任务标题" required>
                </div>
                <div class="form-group">
                    <label for="modalTaskDescription">任务描述</label>
                    <textarea id="modalTaskDescription" placeholder="请输入任务描述（可选）"></textarea>
                </div>
                <div class="form-group">
                    <label for="modalTaskQuadrant">任务象限</label>
                    <select id="modalTaskQuadrant">
                        <option value="urgent-important">紧急且重要</option>
                        <option value="important-not-urgent">重要不紧急</option>
                        <option value="not-important-urgent">不重要紧急</option>
                        <option value="not-important-not-urgent">不紧急不重要</option>
                    </select>
                </div>
                <div class="form-group stay-open-group">
                    <label class="stay-open-toggle">
                        <input type="checkbox" id="modalStayOpen">
                        <span>保存后继续新增</span>
                    </label>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-secondary" onclick="closeAddTaskModal()">取消</button>
                    <button type="submit" class="btn-primary" id="modalPrimaryButton" onclick="addTaskFromModal()">添加任务</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 导出任务配置弹窗 -->
    <div class="modal-overlay" id="exportTaskModal">
        <div class="modal export-modal">
            <div class="modal-header">
                <h2 class="modal-title">导出任务列表</h2>
                <button class="modal-close" onclick="closeExportModal()">×</button>
            </div>
            <div class="export-modal-content">
                <div class="export-config-section">
                    <div class="form-group">
                        <label for="exportFileName">文件名</label>
                        <input type="text" id="exportFileName" placeholder="请输入文件名">
                    </div>
                    
                    <div class="form-group">
                        <label>导出象限</label>
                        <div class="quadrant-checkboxes">
                            <label class="checkbox-item urgent-important">
                                <input type="checkbox" id="exportUrgentImportant" checked>
                                <span class="checkmark"></span>
                                紧急且重要
                            </label>
                            <label class="checkbox-item important-not-urgent">
                                <input type="checkbox" id="exportImportantNotUrgent" checked>
                                <span class="checkmark"></span>
                                重要不紧急
                            </label>
                            <label class="checkbox-item not-important-urgent">
                                <input type="checkbox" id="exportNotImportantUrgent" checked>
                                <span class="checkmark"></span>
                                不重要紧急
                            </label>
                            <label class="checkbox-item not-important-not-urgent">
                                <input type="checkbox" id="exportNotImportantNotUrgent" checked>
                                <span class="checkmark"></span>
                                不紧急不重要
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>导出选项</label>
                        <div class="export-options">
                            <label class="checkbox-item">
                                <input type="checkbox" id="includeCompleted" checked>
                                <span class="checkmark"></span>
                                包含已完成任务
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" id="includeDescription" checked>
                                <span class="checkmark"></span>
                                包含任务描述
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" id="includeMetadata" checked>
                                <span class="checkmark"></span>
                                包含元数据信息
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" id="includeStatistics" checked>
                                <span class="checkmark"></span>
                                包含统计信息
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="export-preview-section">
                    <h3>导出预览</h3>
                    <div class="preview-container">
                        <pre id="exportPreview" class="export-preview"></pre>
                    </div>
                </div>
            </div>
            
            <div class="modal-actions">
                <button type="button" class="btn-secondary" id="exportCancelButton">取消</button>
                <button type="button" class="btn-primary" id="exportConfirmButton">导出</button>
            </div>
        </div>
    </div>

    <!-- 全页显示待办类型弹窗 -->
    <div class="fullscreen-modal-overlay" id="fullscreenModal">
        <div class="fullscreen-modal">
            <div class="fullscreen-modal-header">
                <h1 class="fullscreen-modal-title" id="fullscreenModalTitle"></h1>
                <button class="fullscreen-modal-close" onclick="closeFullscreenModal()">×</button>
            </div>
            <div class="fullscreen-modal-content">
                <div class="fullscreen-tasks" id="fullscreenTasks">
                    <!-- 全页显示的任务列表将在这里生成 -->
                </div>
            </div>
        </div>
    </div>

    <div class="toast-container" id="toastContainer" aria-live="polite" aria-atomic="true"></div>

    <script src="Sortable.js"></script>

    <script src="script.js"></script>
</body>
</html>
